<!--网络推客结佣列表-->
  <template>
  <div>
    <el-form :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="城市：" prop="cityId">
        <el-select @change="cityChange" filterable v-model="ruleForm.cityId" placeholder="请选择">
          <el-option
            v-for="item in citys"
            :key="item.cityId"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="网络推客：" prop="pusherNameOrPhone">
        <el-input v-model.trim="ruleForm.pusherNameOrPhone" placeholder="请输入网络推客"></el-input>
      </el-form-item>
      <el-form-item label="审核状态：" prop="auditStatus">
        <el-select v-model="ruleForm.auditStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提交日期：" prop="time">
        <el-date-picker
          v-model="time"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="编号：" prop="code">
        <el-input v-model.trim="ruleForm.code" placeholder="请输入编号"></el-input>
      </el-form-item>
      <el-form-item label="提交H3状态：" prop="bpmSubmitStatus">
        <el-select v-model="ruleForm.bpmSubmitStatus" placeholder="请选择">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option label="不可提交" :value="1"></el-option>
          <el-option label="提交成功" :value="2"></el-option>
          <el-option label="驳回待提交" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="H3审批状态：" prop="bpmAuditStatus">
        <el-select v-model="ruleForm.bpmAuditStatus" placeholder="请选择">
          <el-option label="全部" :value="undefined"></el-option>
          <el-option label="审核中" :value="1"></el-option>
          <el-option label="审核完成" :value="2"></el-option>
          <el-option label="审核拒绝" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运营审核人：" prop="operatorName">
        <el-input v-model.trim="ruleForm.operatorName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="楼盘：" prop="devId">
        <el-select filterable v-model="ruleForm.devId" placeholder="请选择">
          <el-option
            v-for="item in devList"
            :key="item.id"
            :label="item.devName"
            :value="item.devId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-right:10px;" type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="onClear('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border>
      <el-table-column align="center" width="50" :index="indexFun" type="index" label="序号"></el-table-column>
      <template v-for="colConfig in colConfigs">
        <el-table-column align="center" v-bind="colConfig" :key="colConfig.id"></el-table-column>
      </template>
      <el-table-column align="center" fixed="right" width="250" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="details(scope.row.id,1)" v-if="scope.$index != 0">查看</el-button>
          <span v-else>——</span>
          <el-button
            type="text"
            class="seeTextBef"
            :disabled="auditAuthority(scope.row.status,scope.row.bpmSubmitStatus,scope.row.bpmAuditStatus)"
            @click="details(scope.row.id,2)"
            v-if="scope.$index != 0"
          >审核</el-button>
          <span v-if="roles">
            <el-button
              class="seeText"
              type="text"
              :disabled="Resubmission(scope.row.status,scope.row.bpmSubmitStatus,scope.row.bpmAuditStatus)"
              @click="details(scope.row.id,2,true)"
              v-if="scope.$index != 0"
            >重新提交</el-button>
          </span>
          <el-button
            :disabled="flowChart(scope.row.bpmSubmitStatus)"
            type="text"
            @click="viewProcess(scope.row.id)"
            v-if="scope.$index != 0"
          >查看流程</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next"
      :current-page="ruleForm.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="ruleForm.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  name: "internetTwitter",
  title:'网络推客结佣',
  data() {
    return {
      ruleForm: {
        devId: undefined,
        cityId: "",
        companyName: "",
        pageNum: 1,
        pageSize: 10,
        beginTime: "",
        endTime: "",
        code: "",
        pushFlag: "",
        examineState: undefined,
        operatorName: "", // 运营审核人
        auditStatus: "",
        pusherNameOrPhone: "", // 针对网络推客结佣管理列表的字段
        bpmSubmitStatus: undefined, // 提交H3状态
        bpmAuditStatus: undefined // H3审核状态
      },
      devList: [],
      tableData: [],
      time: [],
      total: 0,
      citys: [],
      roles: false,
      colConfigs: [
        { prop: "code", label: "编号" },
        { prop: "cityName", label: "城市" },
        { prop: "applyUserName", label: "姓名" },
        { prop: "applyUserPhone", label: "手机号" },
        { prop: "devName", label: "楼盘" },
        { prop: "applyBrokerage", label: "申请结佣金额（元）" },
        { prop: "taxBrokerage", label: "应扣税费（元）" },
        { prop: "taxRate", label: "税率" },
        { prop: "payBrokerage", label: "应付款金额（元）" },
        { prop: "oderNum", label: "订单" },
        { prop: "createTime", label: "提交时间" },
        { prop: "auditStatus", label: "审核状态" },
        { prop: "operatorName", label: "运营审核人" },
        { prop: "hSubmitStatus", label: "提交H3状态" },
        { prop: "hAuditStatus", label: "H3审批状态" }
      ],
      options: [
        {
          value: undefined,
          label: "全部"
        },
        {
          value: 1,
          label: "待审核"
        },
        {
          value: 2,
          label: "运营审核通过"
        },
        {
          value: 3,
          label: "财务审核通过"
        },
        {
          value: 4,
          label: "运营审核拒绝"
        },
        {
          value: 5,
          label: "财务审核拒绝"
        },
        {
          value: 6,
          label: "H3审核拒绝"
        }
      ]
    };
  },
  computed: {},
  activated() {
    if(this.$route.params.code || this.$route.name === "internetTwitter") {
      this.ruleForm.code = this.$route.params.code;
      this.list();
    }
  },
  created() {
    this.cityList();
    this.cityChange("");
    this.list();
    let role = JSON.parse(window.localStorage.getItem("cmsUser")).roleName;
    if (role === "运营人员") {
      this.roles = true;
    } else {
      this.roles = false;
    }
  },
  methods: {
    // 查看流程按钮权限
    flowChart(bpmSubmitStatus) {
      if (bpmSubmitStatus == 2 || bpmSubmitStatus == 3) {
        return false;
      } else {
        return true;
      }
    },
    cityChange(val) {
      this.devList = [];
      this.ruleForm.devId = undefined;
      this.$axios.post(api.queryAllDevList, { cityId: val }).then(res => {
        this.devList = res;
      });
    },
    viewProcess(id) {
      this.$router.push({
        path: "./applicationAssessment",
        query: { id: id, type: 6, fromType: true }
      });
    },
    indexFun(index) {
      if (index == 0) {
        return "合计";
      }
      return index;
    },
    // 审核状态
    mystatus(str) {
      if (str == 1) {
        return "待审核";
      } else if (str == 2) {
        return "运营审核通过";
      } else if (str == 3) {
        return "财务审核通过";
      } else if (str == 4) {
        return "运营审核拒绝";
      } else if (str == 5) {
        return "财务审核拒绝";
      } else if (str == 6) {
        return "H3审核拒绝";
      }
    },
    // h3提交状态
    bpmSubmitStatus(status) {
      if (status == 1) {
        return "不可提交";
      }
      if (status == 2) {
        return "提交成功";
      }
      if (status == 3) {
        return "驳回待提交";
      }
    },
    // h3审核状态
    bpmAuditStatus(status) {
      if (status == 1) {
        return "审核中";
      }
      if (status == 2) {
        return "审核完成";
      }
      if (status == 3) {
        return "H3审核拒绝";
      }
      if (status === null) {
        return "";
      }
    },
    /*
      bpmSubmitStatus   提交h3状态  1不可提交 2提交成功 3驳回待提交
      bpmAuditStatus   h3审核状态  1审核中  2审核完成  3H3审核拒绝 
      status 1待审核, 2运营审核通过, 3财务审核通过, 4运营审核拒绝, 5财务审核拒绝, 6H3审核拒绝
      2 3 3
    */
    // 审核按钮权限
    auditAuthority(status, bpmSubmitStatus, bpmAuditStatus) {
      let role = JSON.parse(window.localStorage.getItem("cmsUser")).roleName;
      if (role == "运营人员") {
        if (status === 1 && bpmSubmitStatus === 1 && bpmAuditStatus === null) {
          return false;
        } else {
          return true;
        }
      } else {
        if (
          (bpmSubmitStatus === 1 && bpmAuditStatus === null && status === 2) ||
          (status === 2 && bpmSubmitStatus === 3 && bpmAuditStatus === 3)
        ) {
          return false;
        } else {
          return true;
        }
      }
    },
    // 重新提交按钮权限
    Resubmission(status, bpmSubmitStatus, bpmAuditStatus) {
      let role = JSON.parse(window.localStorage.getItem("cmsUser")).roleName;
      if (role === "运营人员") {
        if (bpmSubmitStatus === 3 && bpmAuditStatus === 3 && status === 6) {
          return false;
        } else {
          return true;
        }
      }
    },
    handleSizeChange(size) {
      this.ruleForm.pageSize = size;
      this.list();
    },
    handleCurrentChange(page) {
      this.ruleForm.pageNum = page;
      this.list();
    },
    list() {
      this.$axios.post(api.internetTwitter, this.ruleForm).then(res => {
        for (let item of res.data) {
          item.applyUserPhone = utils.formatPhoneNumber(item.applyUserPhone);
          item.createTime = utils.getTimeString(item.createTime);
          item.status = item.auditStatus;
          if (typeof item.taxRate == "number") {
            item.taxRate = item.taxRate + "%";
          }
          item.auditStatus = this.mystatus(item.auditStatus);
          item["hSubmitStatus"] = this.bpmSubmitStatus(item.bpmSubmitStatus);
          item["hAuditStatus"] = this.bpmAuditStatus(item.bpmAuditStatus);
        }
        this.tableData = res.data || [];
        let obj = res.totalData || {};
        obj["hSubmitStatus"] = obj.bpmSubmitStatus;
        obj["hAuditStatus"] = obj.bpmAuditStatus;
        Object.keys(obj).forEach(val => {
          if (!obj[val]) {
            obj[val] = "——";
          }
        });
        this.tableData.unshift(obj);
        this.total = res.total;
      });
    },
    cityList() {
      this.$axios.post(api.GETCITY).then(res => {
        this.citys = res.cityList;
      });
    },
    // 查看详情
    details(id, num, again) {
      this.$router.push({
        path: "internetTwitterDetail",
        query: { id: id, num: num, again: again }
      });
    },
    onSearch() {
      let [start, end] = this.time || "";
      this.ruleForm.beginTime = start;
      this.ruleForm.endTime = end;
      this.ruleForm.pageNum = 1;
      this.ruleForm.pageSize = 10;
      this.list();
    },
    onClear(formName) {
      this.ruleForm.pageSize = 10;
      this.ruleForm.pageNum = 1;
      this.time = [];
      this.$refs[formName].resetFields();
      this.cityChange("");
      this.list();
    }
  }
};
</script>
<style lang="stylus" scoped>
.seeText::after {
  content: '|';
  margin-left: 5px;
  color: #409EFF !important;
}

.seeTextBef::after {
  content: '|';
  margin-left: 5px;
  color: #409EFF !important;
}

.seeTextBef::before {
  content: '|';
  margin-right: 5px;
  color: #409EFF !important;
}

.el-button+.el-button {
  margin-left: 0px !important;
}
</style>






